<template>
  <div id="app">
      <van-tabs v-model="active"  @change="onChange" class="bj-f7f7f7" background="#f7f7f7">
        <div class="h-10"></div>
        <van-tab title="我邀约的">

          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onJiazai" :immediate-check="immediate">
            <van-cell-group inset>
              <div v-for="(item, index) in list" :key="index" label="描述信息" icon="location-o"  >
                <van-cell :border="false" size="large" @click="tiao(item.yhid)">
                <template #title>
                  <span class="">{{item.yhfind.ncnicknamenc}}</span>
                  <van-tag type="danger" round color="#ff8080" size="medium">&nbsp;{{item.yhfind.sextext}}&nbsp;&nbsp;{{item.yhfind.birthday}}岁&nbsp;</van-tag>
                </template>
                <template #label>
                  <span class="">{{item.yhfind.xjdaddress}}</span>
                </template>
                <template #icon>
                  <img :src="item.yhfind.headimgurl" alt="" class="left-img">
                </template>
                </van-cell>
               <div class="xl-sg-hyzk">学历：{{item.yhfind.xlname}}&nbsp;&nbsp;身高：{{item.yhfind.sgname}}cm&nbsp;&nbsp;婚姻状况：{{item.yhfind.hynametext}}</div>

               <div class="xl-sg-hyzk-right" v-if="active == 0">
                 <div class="h-10"></div>
                 <div  v-if="item.status == 2">
                    <van-tag type="danger" round color="#ff8080" size="large"  @click="ty(item.orderlist)">点击获取联系方式</van-tag>
                 </div>
                 <div  v-if="item.status == 3">
                    <van-tag type="danger" round color="#cccccc" size="large" >已拒绝</van-tag>
                 </div>
               </div>

               <div class="h-10"></div>
               <div class="h-15 bj-f7f7f7"></div>
              </div>
            </van-cell-group>
          </van-list>


        </van-tab>
        <van-tab title="被邀约的">

          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onJiazai" :immediate-check="immediate">
            <van-cell-group inset>
              <div v-for="(item, index) in list" :key="index" label="描述信息" icon="location-o" >
                <van-cell :border="false" size="large" @click="tiao(item.userid)" >
                <template #title>
                  <span class="">{{item.userfind.ncnicknamenc}}</span>
                  <van-tag type="danger" round color="#ff8080" size="medium">&nbsp;{{item.userfind.sextext}}&nbsp;&nbsp;{{item.userfind.birthday}}岁&nbsp;</van-tag>
                </template>
                <template #label>
                  <span class="">{{item.userfind.xjdaddress}}</span>
                </template>
                <template #icon>
                  <img :src="item.userfind.headimgurl" alt="" class="left-img">
                </template>
                </van-cell>
               <div class="xl-sg-hyzk">学历：{{item.userfind.xlname}}&nbsp;&nbsp;身高：{{item.userfind.sgname}}cm&nbsp;&nbsp;婚姻状况：{{item.userfind.hynametext}}</div>
               <div class="xl-sg-hyzk-right" v-if="active == 1">
                 <div class="h-10"></div>
                 <div  v-if="item.status == 1">
                    <van-tag type="danger" round color="#ff8080" size="large" @click="ok(item.id,2)">同意</van-tag>
                    <van-tag type="danger" round color="#cccccc" size="large" @click="ok(item.id,3)">拒绝</van-tag>
                 </div>
                 <div  v-if="item.status == 2">
                    <van-tag type="danger" round color="#ff8080" size="large"  @click="ty(item.orderlist)">点击获取联系方式</van-tag>
                 </div>
                 <div  v-if="item.status == 3">
                    <van-tag type="danger" round color="#cccccc" size="large" >已拒绝</van-tag>
                 </div>
               </div>

               <div class="h-10"></div>
               <div class="h-15 bj-f7f7f7"></div>
              </div>
            </van-cell-group>
          </van-list>

        </van-tab>




      </van-tabs>
  </div>
</template>
<script>
import { Dialog } from 'vant';
export default {
  data () {
    return {
      active: 0,

      list: [],
      immediate:false,
      loading: false,
      finished: false,
      page: 1,//请求第几页
      total: 0,//总共的数据条数

    }
  },
  created:function () {
    this.$emit('footer', true);
  },
  components: {
  },

  mounted () {
    this.recordapi();
  },
  	methods: {
      ty(e){
        var text = "该会员编号为："+e+"，请将编号牢记并联系平台获联系方式"

         Dialog.confirm({
           title: '牵手成功',
           confirmButtonText:'点击复制编号',
           message: text,
         })
         .then(() => {
            var input = document.createElement("input");   // js创建一个input输入框
               input.value = e;  // 将需要复制的文本赋值到创建的input输入框中
               document.body.appendChild(input);    // 将输入框暂时创建到实例里面
               input.select();   // 选中输入框中的内容
               document.execCommand("Copy");   // 执行复制操作
               document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
               this.$toast("复制成功");
         })
         .catch(() => {
           // on cancel
         });


      },
      tiao(e){
        this.$router.push('Usercont?id='+e)
      },

      ok(id,status){
        var that = this;
        that.$api.post("/Index/okorder",{'id':id,'status':status}).then(res => {
            console.log(res);
            this.$toast(res.msg);
            that.list= [],
            that.recordapi();
        })
      },


      onChange(index) {
         var that = this;
         console.log(index);
         that.active = index
         that.page = 1;
         that.list= [],
         that.recordapi();
      },

      recordapi(){
          var that = this;
          var userid = that.$cookieStore.getCookie('userid');
          that.$api.post("/Index/yuehuilist",{'userid':userid,type:that.active,'page':this.page}).then(res => {
            console.log(res);
            let rows = res.list.data; //请求返回当页的列表
            // // console.log(that.page);
            console.log(rows)
             that.loading  = false;
             that.pageSize = res.list.per_page;
             that.total    = res.list.total;
             if (rows == null || rows.length === 0) {
               // 加载结束
               that.finished = true;
               return;
             }
            // 将新数据与老数据进行合并
             that.list = that.list.concat(rows);
            // //如果列表数据条数>=总条数，不再触发滚动加载
            if(that.list.length >= that.total){
               that.finished = true;
            }
          });
      },
      // 加载
      onJiazai:function(){
        var that = this;
        that.page= that.page +1;
        console.log(that.page)
        that.recordapi()
      },

    }
}
</script>
